<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>管理员信息</span>
      </div>
      <ul class="personal-main">
        <li>
          <p>
            管理员ID: <span>{{ user.id }}</span>
          </p>
        </li>
        <li>
          <p>
            账号: <span>{{ user.account }}</span>
          </p>
        </li>
        <li>
          <p>
            用户组: <span>{{ user.userGroup }}</span>
          </p>
        </li>
        <li>
          <p>
            创建时间: <span ref="">{{ user.ctime | formatDate }}</span>
          </p>
        </li>
        <li>
          <p>
            管理员头像:
            <el-upload
              class="avatar-uploader"
              :action="action"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="user.imgUrl" :src="user.imgUrl" class="avatar" />
              <!-- <i class="el-icon-plus avatar-uploader-icon"></i> -->
            </el-upload>
          </p>
        </li>
      </ul>
    </el-card>
  </div>
</template>

<script>
import { usersInfo, usersAvatEdit } from "../../api/user";
import dayjs from "dayjs";
export default {
  data() {
    return {
      action: "http://127.0.0.1:5000/users/avatar_upload", //绑定的是上传接口
      user: {
        id: "",
        account: "",
        userGroup: "",
        ctime: "",
        imgUrl: "",
      },
    };
  },
  created() {
    this.xuanList();
    
  },
  methods: {
    //用户数据展示
    async xuanList() {
      let res = await usersInfo();
      console.log(res);
      this.user.id = res.id;
      this.user.account = res.account;
      this.user.userGroup = res.userGroup;
      this.user.ctime = res.ctime;
      this.user.imgUrl = res.imgUrl;
    },

    //头像方法
    //头像上传成功
  async  handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.user.imgUrl = res.imgUrl;
      console.log(res);
      let { code, msg } = res;

      //当头像上传成功后，我们要将后台数据库地址也修改好
      if (code === 0) {
        let data = await usersAvatEdit({ params: { imgUrl: res.imgUrl } });

        //此时就是重新渲染到头像上面去我们需要bus传参  就是乱传
        if (data.code === 0) {
          //通过bus告诉 头部组件 哥,我已经修改了头像  你应该重新加载数据
          this.$bus.$emit("headDel","我已经修改了头像")
          
        }
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },

  filters: {
    //时间的修改
    formatDate(val) {
      return dayjs(val).format("YYYY/MM/DD");
    },
  },
};
</script>

<style lang="less" scoped>
.personal-main {
  li {
    line-height: 60px;
    border-bottom: 1px solid rgb(238, 237, 237);
    p {
      padding: 0 20px;
    }

    img {
      width: 80px;
      height: 80px;
    }
  }
}
/deep/.el-card__body {
  padding: 0 0px;

  //头像样式
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 128px;
    height: 128px;
    display: block;
  }
}
</style>